<template>
    <div class="qiamnDaoMian">

        <div class="qianTop">
            <div></div>
            <div class="meetInfo">
                <img src="../assets/qiang/wallImg.png" alt="留言墙">
                <div> {{ form.signatureName }}</div>
                <div>会议日期：{{ form.signatureStartTime }}</div>
            </div>
            <div></div>
            <div class="erCode">
                <img :src="form.signaturePic" alt="" srcset="">
                <img src="../assets/qiang/saoma.png" alt="">
            </div>
        </div>
        <div class="canleBox">
            <div @click="startHandle">
                <i class="el-icon-video-play" v-if="!startFlag"></i>
                <i class="el-icon-video-pause" v-else></i>
            </div>
            <!-- <div @click="stopHandle">
                {{ signFlag ? '开始签到' : '停止签到' }}
            </div>
            <div v-if="signFlag" @click="startHandle">{{ startFlag ? '暂停' : '开始' }}</div> -->
        </div>

        <div class="numTip">区域占比：<span>
                {{ ((((signProvinceList.length || 0) / 34)) * 100).toFixed(1) + '%' }}</span> </div>

        <!-- 人员列表 开始 -->
        <div class="staList">
            <el-carousel ref="carousel" arrow="never" :autoPlay="autoPlay" :interval="5000" height="79vh"
                :initial-index="activeIndex" indicator-position="none">
                <el-carousel-item v-for="(item, index) in pageList" :key="index">
                    <div class="userMian">
                        <div class="userBox" v-for="(ele, eindex) in item" :key="eindex">
                            <div>
                                <span> {{ ele.name.slice(0, 1) }}</span>
                            </div>
                            <span>{{ ele.name }}</span>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 人员列表 结束 -->

        <!-- 地图 -->
        <div class="mapCon">
            <div class="mapBox" ref="chart">
            </div>
        </div>




        <!-- 弹窗展示 开始 -->
        <div class="diaBox" v-if="showFlag">
            <div class="userBox1">
                <div class="userShopName">
                    <div>{{ userInfo.company }}</div>
                </div>
                <div class="userShopName userShopName1"> {{ userInfo.company }}</div>
                <div class="userImg">
                    <div>{{ userInfo.name }} <span class="typeTip">{{ userInfo.sex }}</span> </div>
                </div>

                <div class="userTelBox">
                    <div>{{ userInfo.tel || '暂无' }}</div>
                </div>

            </div>
        </div>
        <!-- 弹窗展示  结束 -->
    </div>
</template>


<script>
import { china } from "../utils/china.js";
import * as echarts from "echarts";
export default {
    name: 'qianDao',
    data() {
        return {
            userList: [],
            pageList:
                localStorage.signPageList == undefined
                    ? []
                    : JSON.parse(localStorage.signPageList),
            pageList: [],
            activeIndex: 0,
            autoPlay: true,
            form: {},
            activeId: localStorage.activeId == undefined ? 0 : localStorage.activeId,
            startFlag: false,
            timer: "",
            showFlag:
                localStorage.showFlag == undefined
                    ? false
                    : JSON.parse(localStorage.showFlag),
            userInfo: {},
            showTimer: "",
            num: localStorage.signNum == undefined || localStorage.signNum == NaN ? 0 : localStorage.signNum,
            total: 0,
            signFlag: localStorage.signFlag == undefined ? false : true,
            nameFlag: false,
            telFlag: false,
            sexFlag: false,
            companyFlag: false,
            positionFlag: false,
            onPageTotal: 75,//一页显示多少人

            signCityList: [],
            signProvinceList: [],
            systemId: sessionStorage.systemId,
        }
    },
    mounted() {
        if (localStorage.signProvinceList) {
            this.signProvinceList = JSON.parse(localStorage.signProvinceList);
        }
        if (localStorage.signCityList) {
            this.signCityList = JSON.parse(localStorage.signCityList);
        }
        console.log(this.signProvinceList);

        this.echartsInit(this.signCityList);

    },
    created() {
        console.log(this.systemId);

        if (localStorage.form != undefined) {
            this.form = JSON.parse(localStorage.form)
            console.log(this.form);
            var str = this.form.signatureFlag
            console.log(str);

            this.nameFlag = str.indexOf('姓名') != -1
            this.telFlag = str.indexOf('电话') != -1
            this.sexFlag = str.indexOf('身份') != -1
            this.companyFlag = str.indexOf('诊所') != -1
            this.positionFlag = str.indexOf('地区') != -1
        }
        if (localStorage.signUserList) {
            this.userList = JSON.parse(localStorage.signUserList);
        }


        for (let index = 0; index < 6; index++) {
            // this.userList.push(...this.userList)
        }

        this.pageList = this.cutArray(this.userList, this.onPageTotal);
        console.log(this.pageList);
        this.openWeb()
        console.log(china)
    },
    methods: {

        echartsInit(data) {
            var mapChatDate = china;
            this.$echarts.registerMap('china', mapChatDate);
            const myChart = echarts.init(this.$refs.chart);
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params.data);
                        if (params.data) {
                            return '<div><div class="tipTopBox" >' + params.data.name + '</div><div class="tipLinBox" >签到人数：<span>' + params.data.value + '</span>人</div>';
                        }
                    },
                    textStyle: { color: "#fff" }, //提示标签字体颜色
                    className: 'tooltip_box',
                },
                visualMap: {
                    show: false,
                    bottom: 100,
                    right: 0,
                    text: ["多", "少"],
                    min: 0,
                    max: 1,
                    precision: 0,
                    itemHeight: 100,
                    color: [
                        'RGBA(15, 152, 247, .8)'
                    ],

                    textStyle: {
                        fontSize: 16,//字体大小
                        color: '#F2F9FF'//字体颜色
                    },
                    calculable: true, // 是否显示拖拽用的手柄 ，颜色深浅变化
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        roam: true,
                        itemStyle: {
                            normal: {
                                label: { show: false },
                                borderWidth: 1, //设置外层边框
                                borderColor: "rgba(255,255,255,.4)", //区域边框颜色
                                areaColor: "rgba(211, 139, 130, .4)",// 地图区域的颜色
                            },
                            emphasis: {
                                label: { show: true, fontSize: 16, color: '#fff' }, // 悬浮时地区名称放大
                                borderWidth: 1,        // 悬停时的边框宽度
                                shadowBlur: 10,
                                shadowColor: "rgba(0, 0, 0, 0.2)",
                                borderColor: "#fff",
                                areaColor: "RGBA(15, 152, 247, .8)",  // 悬停时区域颜色
                            }
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    fontSize: 2,
                                    fontWeight: '400',
                                    color: '#fff'
                                }
                            }
                        },
                        data: data,
                    }
                ],

            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });


        },
        openWeb() {
            if (typeof WebSocket == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");
                console.log(this.form);
                // var socketUrl = "http://192.168.0.111:2033/imserver/" + 's_' + this.form.signatureId;
                var socketUrl = "wss://www.ccclkj.cn:2033/imserver/" + 's_' + this.form.signatureId;
                socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                console.log(socketUrl);
                if (this.socket != null) {
                    this.socket.close();
                    this.socket = null;
                }
                //打开事件
                this.socket = new WebSocket(socketUrl);
                //打开事件
                this.socket.onopen = function () {
                    console.log("websocket已打开");
                };
                var _this = this;
                //获得消息事件
                _this.socket.onmessage = function (msg) {
                    console.log(msg.data);
                    if (msg.data == "连接成功") {
                        _this.$message({
                            type: "success",
                            duration: 500,
                            offset: "400",
                            message: "连接成功",
                        });
                    }
                    if (msg.data != "连接成功") {
                        var data = JSON.parse(msg.data);
                        console.log(data);
                        if (data.position != '') {  // 有地区 将地区签到数量统计出来

                            var province = data.position.split('/')[0];
                            var city = data.position.split('/')[1];
                            console.log(city);


                            if (!_this.signProvinceList.some(item => {
                                return item == province
                            })) {
                                _this.signProvinceList.push(province)
                                localStorage.signProvinceList = JSON.stringify(_this.signProvinceList);
                            }

                            console.log(_this.signProvinceList);

                            var isHave = _this.signCityList.some(item => {
                                return item.name == city
                            })



                            if (isHave) {
                                _this.signCityList.forEach(item => {
                                    if (item.name == city) {
                                        item.value++
                                    }
                                })
                            } else {
                                _this.signCityList.push({
                                    name: city,
                                    value: 1
                                })
                            }
                            localStorage.signCityList = JSON.stringify(_this.signCityList);
                            console.log(_this.signCityList);
                            _this.echartsInit(_this.signCityList);

                        }
                        data.userTel = _this.telHandle(data.userTel)
                        console.log(_this.userList);
                        if (!_this.signFlag) {
                            _this.userList.push({
                                name: data.name,
                                sex: data.userSex,
                                tel: data.userTel,
                                company: data.company,
                                demand: data.demand,
                                position: data.position,
                                nowTime: _this.currentTime()
                            });
                        }
                        localStorage.signUserList = JSON.stringify(_this.userList);
                        console.log(_this.userList);
                        //发现消息进入    开始处理前端触发逻辑
                    };
                    //关闭事件
                    _this.socket.onclose = function () {
                        console.log("websocket已关闭");
                    };
                    //发生了错误事件
                    _this.socket.onerror = function () {
                        _this.$message.warning("连接失败");
                        console.log("websocket发生了错误");
                    };
                }
            }
        },
        cutArray(array, subLength) {
            let index = 0;
            let newArr = [];
            while (index < array.length) {
                newArr.push(array.slice(index, (index += subLength)));
            }
            return newArr;
        },
        nextHandle() {
            this.activeIndex = this.pageList.length - 1;
        },
        currentTime() {
            var date = new Date();
            var year = date.getFullYear();
            var dateArr = [
                date.getMonth() + 1,
                date.getDate(),
            ];
            return year +
                "-" +
                dateArr[0] +
                "-" +
                dateArr[1]
        },
        telHandle(tel) {
            let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/
            return tel.replace(reg, "$1****$2")
        },
        // 播放 暂停 弹窗
        startHandle() {
            console.log(this.startFlag);
            if (this.startFlag) {
                // 暂停弹窗
                clearInterval(this.showTimer)
                this.showFlag = false
                console.log(this.num);
                localStorage.signNum = this.num
                this.startFlag = false
            } else {
                // 开始弹窗
                this.showFlag = true
                this.startFlag = true
                this.num = localStorage.signNum || 0
                this.loops()
            }
        },
        stopHandle() {

            if (!this.signFlag) {
                // 停止
                this.socket.close()
                this.signFlag = true
            } else {
                // 开启
                this.openWeb()
                this.signFlag = false
            }

            // if (this.userList.length != 0) {
            //     this.signFlag = true;
            //     localStorage.signFlag = true;
            //     this.userInfo = this.userList[0];
            //     this.loops();
            // }
        },
        loops() {
            console.log(this.userList);
            console.log(this.num);

            this.userInfo = this.userList[this.num];
            if (!this.userInfo) {
                this.num = 0
                this.userInfo = this.userList[this.num];
            }
            console.log(this.userInfo);
            // return

            this.autoPlay = true;
            this.showFlag = true;
            this.showTimer = setInterval(() => {
                if (this.num == this.userList.length - 1) {
                    this.num = 0;
                } else {
                    this.num++;
                }

                this.userInfo = this.userList[this.num];
                console.log(this.userInfo);
                console.log(this.num);
            }, 10000);
        },

    },
    watch: {
        userList(val) {
            this.pageList = this.cutArray(val, this.onPageTotal);
            localStorage.signPageList = JSON.stringify(this.pageList);
        },
        pageList(val, oldVal) {
            if (val.length > oldVal.length) {
                this.nextHandle();
            }
        },
    },
    beforeDestroy() {
        clearInterval(this.showTimer);
    },
}
</script>
<style lang="less" scoped>
.qiamnDaoMian {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url(../assets/qiang/bottomBg.png);
    // background-image: url(../assets/qiang/shuBg.png);
    background-size: 100% 100%;

    .qianTop {
        box-sizing: border-box;
        padding: 40px 74px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        // height: 30vh;
        // box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.4);
        background-image: url(../assets/qiang/topBg.png);
        background-size: 100% 100%;

        img {
            width: 130px;
            height: 78px;
        }

        .meetInfo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 36px;
            color: #fff;
        }

        .meetInfo>div:nth-child(2) {
            margin: 40px 0;
        }

        .meetInfo>div:nth-child(3) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #999999;
        }

    }

    ::-webkit-scrollbar {
        display: none;
    }

    .staList {
        box-sizing: border-box;
        // padding: 30px 0px;
        // margin: -2px 40px 0px;
        display: flex;
        justify-content: flex-start;
        align-content: start;
        flex-wrap: wrap;
        // width: calc(100% - 80px);
        width: 100%;
        height: 70vh;
        // border: 2px solid #EBF0FF;
        // border-radius: 0px 0px 20px 20px;

        // background: linear-gradient(96deg, #E02D13 0%, #6E0005 100%);




        >div {
            position: relative;
            // margin-right: 62px;
            // margin-bottom: 24px;
            width: 100%;
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            // justify-content: center;
            cursor: pointer;

            // .bgImg {
            //     margin-bottom: 8px;
            //     position: relative;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     width: 110px;
            //     height: 100px;
            //     background: url(../assets/X2/jiang/bg.png);
            //     background-size: 100%;
            //     background-repeat: no-repeat;

            //     img {
            //         position: absolute;
            //         top: 20px;
            //         left: 20px;
            //         width: 70px;
            //         height: 70px;
            //         border-radius: 50%;
            //     }
            // }

            // .bg {
            //     margin-bottom: 8px;
            //     position: relative;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            //     width: 110px;
            //     height: 100px;

            //     img {
            //         position: absolute;
            //         top: 20px;
            //         left: 20px;
            //         width: 70px;
            //         height: 70px;
            //         border-radius: 50%;
            //     }
            // }

            // .jiangTip {
            //     position: absolute;
            //     top: 15px;
            //     left: 10px;
            // }



            // div {
            //     font-size: 16px;
            //     font-family: Source Han Sans CN;
            //     font-weight: 500;
            //     color: #0B1532;
            //     width: 70px;
            //     text-align: center;
            //     white-space: nowrap;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            // }

            // .jiangName {
            //     color: #3E68FF;
            // }
        }
    }

    .jiangBtn {
        margin: 70px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 192px;
        height: 64px;
        background: #0B1532;
        border-radius: 32px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        cursor: pointer;

        img {
            margin-left: 16px;
            width: 14px;
            height: 12px;
        }
    }

    .jiangDialog {
        padding-bottom: 24px;
        position: absolute;
        top: 0px;
        left: -97px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        width: 540px;
        background: #fff;
        border-radius: 18px 18px 16px 16px;

        .jiangTop {
            box-sizing: border-box;
            padding: 0px 28px 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 540px;
            height: 69px;
            background: #0B1532;
            border-radius: 16px 16px 0px 0px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }

        img {
            margin-top: 27px;
            width: 102px;
            height: 102px;
            border-radius: 50%;
        }

        >span {
            margin-top: 18px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            cursor: pointer;
        }

        .btnBox {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            width: 100%;

            >div {
                width: 145px;
                height: 47px;
                line-height: 47px;
                text-align: center;
                background: #0B1532;
                border-radius: 24px;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                cursor: pointer;

            }

            >div:first-child {
                margin-right: 114px;
                color: #FFFFFF;
            }

            >div:last-child {
                border: 2px solid #0B1532;
                background-color: #fff;
                color: #0B1532;
            }
        }

        .userListBox {
            width: 100%;
            max-height: 300px;
            overflow-y: scroll;

            .listItem {
                padding: 10px 32px;
                font-size: 20px;
                color: #fff;

                span:last-child {
                    margin-left: 20px;
                }
            }
        }
    }
}


.userMian {
    position: relative;
    box-sizing: border-box;
    padding: 30px 10px 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    width: 100%;
    z-index: 2;
}

.userBox {
    position: relative;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 15);
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0B1532;
    z-index: 20;
}

.userBox>div {
    margin-bottom: 0px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    // background-color: #FED98B;
    background: linear-gradient(0deg, #FEFEFE, #E297A0);
}

.userBox>div>span {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 36px;
    color: #A40000;
}

.userBox>span {
    margin-top: 10px;
    text-align: center;
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 2px 4px rgba(255, 255, 255, 0.4);

    background: linear-gradient(0deg, #FEFEFE 0%, #E297A0 100%);
    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}

.el-carousel__container,
.el-carousel {
    width: 100% !important;
    height: 70vh !important;
    // background-color: #FED98B;
    overflow: hidden;
}



.el-carousel::-webkit-scrollbar {
    display: none;
}

.el-carousel__arrow {
    display: none !important;
}

.el-carousel__indicators--horizontal {
    z-index: -1 !important;
    display: none !important;
}

.jiangBox {
    width: 100%;
    height: 600px;
}

.selectuser {
    position: relative;
    box-sizing: border-box;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 373px;
    height: 46px;
    border: 2px solid #cc904a;
    border-radius: 8px;
    border-top: 1px solid #cc904a;
    border-bottom: 1px solid #cc904a;
}

.selectuser>div:nth-child(2) {
    font-size: 48px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fed98b;
    transform: scaleY(0.5);
}

.selectuser>div:not(:nth-child(2)) {
    width: 22px;
    height: 10px;
    background: linear-gradient(65deg, #bf8145, #eec388, #8c4d22);
}

.selectuser>div:first-child {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-left-color: #eec388;
    transform: scaleY(0.5);
}

.selectuser>div:last-child {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-right-color: #eec388;
    transform: scaleY(0.5);
}

.diaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .3);
    z-index: 10;
}

.userBox1 {
    position: relative;
    // width: 33%;
    // height: 61%;
    width: 640px;
    height: 666px;
    background-image: url(../assets/qiang/diaBg.png);
    background-size: 100% 100%;
}

.boxTop {
    width: 540px;
    height: 69px;
    background: #7273E5;
    border-radius: 16px 16px 0px 0px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 69px;
    text-align: center;
}

.userImg {
    margin-left: 86px;
    // position: absolute;
    // top: 250px;
    // left: 86px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 42px;
    color: #34220B;
    background: linear-gradient(46deg, #D88941 0%, #925116 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.userShopName {
    margin: 180px 0 30px 80px;
    // position: absolute;
    // top: 166px;
    // left: 80px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 48px;

}

.userShopName>div {
    color: #34220B;
    background: linear-gradient(46deg, #D88941 0%, #925116 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.userShopName1 {
    position: absolute;
    top: -2px;
    left: -2px;
    color: #34220B;
}

.userTelBox {
    position: absolute;
    bottom: 120px;
    right: 86px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #8B6844;
}

.imgBox {
    margin-bottom: 14px;
    width: 102px;
    height: 102px;
    line-height: 102px;
    text-align: center;
    border-radius: 50%;
    background-color: #F9CD92;
    color: #fff;
    font-size: 42px;
    font-weight: bold;
}

.userBox1 {
    animation: scaleAnmite 10s linear infinite;
    -webkit-animation: scaleAnmite 10s linear infinite;
}

@keyframes scaleAnmite {
    0% {
        transform: scale(0);
    }

    0.5% {
        transform: scale(0.1);
    }

    1% {
        transform: scale(0.2);
    }

    1.5% {
        transform: scale(0.3);
    }

    2% {
        transform: scale(0.4);
    }

    2.5% {
        transform: scale(0.5);
    }

    3% {
        transform: scale(0.6);
    }

    3.5% {
        transform: scale(0.7);
    }

    4% {
        transform: scale(0.8);
    }

    4.5% {
        transform: scale(0.9);
    }

    5% {
        transform: scale(1);
    }

    95% {
        transform: scale(1);
    }

    95.5% {
        transform: scale(0.9);
    }

    96% {
        transform: scale(0.8);
    }

    96.5% {
        transform: scale(0.7);
    }

    97% {
        transform: scale(0.6);
    }

    97.5% {
        transform: scale(0.5);
    }

    98% {
        transform: scale(0.4);
    }

    98.5% {
        transform: scale(0.3);
    }

    99% {
        transform: scale(0.2);
    }

    99.5% {
        transform: scale(0.1);
    }

    100% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

.canleBox {
    position: absolute;
    top: 36px;
    right: 20px;
    z-index: 12;
    cursor: pointer;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // text-decoration: underline;
    color: #fd0000;
    z-index: 12;
    // border-bottom: 1px solid #0B1532;
}


.erCode {
    position: absolute;
    top: 92px;
    right: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: FZZongYi-M05S;
    font-weight: 400;
    font-size: 25px !important;
    color: #fafafa !important;
}

.erCode>img:first-child {
    margin-bottom: 6px !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 10px !important;
}

.erCode>img:last-child {
    width: 108px;
    height: 30px;
}

.typeTip {
    margin-left: 20px;
    color: #ff9c1b !important;
    font-size: 28px;
    background: linear-gradient(46deg, #000000 0%, #000000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mapCon {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;

    // bottom: 2vh;
    // left: calc(50% - 494px);
    // width: 988px;
    // height: 794px;
}

.mapBox {
    position: absolute;

    width: 100%;
    height: 100%;


    // background-image: url(../assets/qiang/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.numTip {
    position: absolute;
    top: 20px;
    right: 60px;
    z-index: 1;
    // width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 2px 4px rgba(255, 255, 255, 0.4);

    background: linear-gradient(0deg, #FEFEFE 0%, #E297A0 100%);
    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>